<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="column in columns"
      :key="column.name"
      :min-width="200"
      :prop="column.name"
      :show-overflow-tooltip="true"
      :label="column.name"
      :type="column.type === 'number' ? 'number' : 'default'"
    >
    </el-table-column>
  </el-table>
</template>
  
<script lang="ts" setup>
import { ref, onMounted } from "vue";
const props = defineProps<{
  columns: any[];
  data: any[];
}>();
// 模拟从 JSON 文件中读取数据
const jsonData = {
  columns: props.columns,
  data: props.data,
};

const columns = ref([]);
const tableData = ref([]);

onMounted(() => {
  try {
    columns.value = jsonData.columns;
    tableData.value = jsonData.data;
  } catch (error) {
    console.error("Error loading data", error);
  }
});
</script>
  
  <style scoped lang="scss">
.el-table {
  max-height: 425px !important;
}
:deep(th) {
  padding: 15px 0 !important;
}
:deep(td) {
  padding: 13px 0 !important;
}
:deep(.el-table__body-wrapper) {
  max-height: 350px;
  overflow: auto;
}
/* 添加一些样式以美化表格 */
</style>